<!DOCTYPE html>
<html>
<head>
	<style>
		html {
			--default-text-color: #212121;
			--light-text-color: #636363;
			--greyed-out-text-color: #808080;
			--active-text-color: #1976d2;

			--exonerated-color: #0084ff;
			--success-color: #169c16;
			--failure-color: #d23a2d;
			--warning-text-color: #ff9900;
			--warning-color: #ffae00;
			--scheduled-color: #73808c;
			--started-color: #ff8000;
			--critical-failure-color: #6c40bf;
			--canceled-color: var(--exonerated-color);

			--scheduled-bg-color: #b7c1c9;
			--started-bg-color: #ffd1a2;
			--success-bg-color: #97ddbb;
			--failure-bg-color: #ffc9c5;
			--critical-failure-bg-color: #dfceff;
			--canceled-bg-color: #c5ecff;

			--block-background-color: #f5f5f5;
			--dark-background-color: #555555;
			--highlight-background-color: var(--warning-color);

			--divider-color: #dddddd;
			--active-color: #007bff;
			--light-active-color: #d9edfc;
			--delete-color: var(--failure-color);
			--mdc-theme-primary: var(--active-color);

			--light-background-color-1: hsl(206, 85%, 96%);
			--light-background-color-2: hsl(206, 85%, 91%);
			--light-background-color-3: hsl(206, 85%, 84%);
			--light-background-color-4: hsl(206, 85%, 74%);

			--expand-button-width: 155px;
		}
		.loading {
			background-image: linear-gradient(45deg,
			rgba(255, 255, 255, 0.15) 25%,
			transparent 25%,
			transparent 50%,
			rgba(255, 255, 255, 0.15) 50%,
			rgba(255, 255, 255, 0.15) 75%,
			transparent 75%,
			transparent);
			background-size: 1rem 1rem;
			animation: 1s linear 0s infinite normal none running progress-bar-stripes;
		}
		@keyframes progress-bar-stripes {
			0% {background-position: 1rem 0px;}
			100% {background-position: 0px 0px;}
		}
	</style>
</head>
</html>
<body>
<progress max="100" value="70"> 70% </progress>

<span class=" loading " style="width:100%;height:2rem;display: block;flex-grow: 1; background-color: var(--active-color);"></span>
</body>
